<template>
    <div class="app-container">
      <!-- 左侧边栏 -->
      <aside class="sidebar">
        <div class="user-profile">
          <!-- <div class="avatar">
            <img :src="user.avatar" alt="用户头像">
          </div> -->
          <h2 class="username">{{ user.name }}</h2>
          <div class="user-info">
            <p><span>邮箱：</span>{{ user.email }}</p>
            <p><span>注册时间：</span>{{ user.registerDate }}</p>
          </div>
          <div class="action-buttons">
      <button class="btn switch-account" @click="switchAccount">
        <i class="fas fa-sync-alt"></i>
        <span>切换账号</span>
      </button>
      <button class="btn logout" @click="logout">
        <i class="fas fa-sign-out-alt"></i>
        <span>退出登录</span>
      </button>
    </div>
        </div>
      </aside>
  
      <!-- 主内容区 -->
      <main class="main-content">
        <!-- 文档类型选择器 -->
        <div class="doc-selector">
          <div 
            v-for="docType in docTypes"
            :key="docType.id"
            class="doc-card"
            @click="navigateToDoc(docType.path)"
          >
            <div class="card-icon">
              <i :class="docType.icon"></i>
            </div>
            <h3>{{ docType.title }}</h3>
            <p>{{ docType.description }}</p>
          </div>
        </div>
  
        <!-- 路由视图 -->
        <router-view></router-view>
      </main>
    </div>
  </template>
  
  <script setup>
  import { reactive } from 'vue'
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  import { onMounted } from 'vue'
  import axios from 'axios'; // 引入 axios

  const apiClient = axios.create({
  baseURL: 'http://localhost:8088/mainapi', // 统一基础URL
  timeout: 10000, // 设置超时时间
});
  const router = useRouter();
// 新增方法
  const switchAccount = () => {
    router.push('/login')
  }

  const logout = () => {
    // 清除本地存储
    localStorage.removeItem('token')
    // 跳转到登录页
    router.push('/login')
  }

  const user = reactive({
    name: '',
    email: '',
    avatar: 'https://via.placeholder.com/150',
    registerDate: '2023-01-01'
  })
  
  // 文档类型配置
  const docTypes = ref([
    {
      id: 1,
      title: 'Word文档',
      description: '创建文字处理文档',
      icon: 'fas fa-file-word',
      path: '/word'
    },
    {
      id: 2,
      title: 'Excel表格',
      description: '创建电子表格文档',
      icon: 'fas fa-file-excel',
      path: '/excel'
    },
    {
    id: 3,
    title: '画板文档',
    description: '创建自由绘图文档',
    icon: 'fas fa-palette',
    path: '/draw'
    }
  ])
  
  // 导航方法
  const navigateToDoc = (path) => {
    router.push(path)
  }


  onMounted(async () => {
    const token = localStorage.getItem('token');
    console.log(token);
      if (token) {
        try {
          const response = await apiClient.get('/getUserInfo', {
            headers: { Authorization: `Bearer ${token}` }
          });
          
          user.name = response.data.name;
          user.email = response.data.email;
        } catch (error) {
          errorMessage.value = '获取用户信息失败';
          console.error('User info error:', error);

          localStorage.removeItem('token');
          router.push('/login');
        }
      } else {
        router.push('/login');
      }
    });
  </script>
  
  <style scoped>

.sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 使按钮容器可以固定在底部 */
}

.action-buttons {
  margin-top: auto; /* 将按钮推到侧边栏底部 */
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

button {
  padding: 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.switch-account {
  background: #3498db;
  color: white;
}

.logout {
  background: #e74c3c;
  color: white;
}

button:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}



.app-container {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  height: 100vh; /* 固定高度 */
  overflow: hidden; /* 防止滚动条 */
  display: flex;
  background-color: #f5f6fa;
}
.user-profile {
  margin-top: 0.5rem; /* 减少顶部间距 */
}

  .sidebar {
    width: 280px;
    background: #2c3e50;
    color: white;
    padding: 2rem;
    height: 100vh;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
  }
  
  .user-profile {
    text-align: center;
  }
  /* 在现有图标颜色规则下添加 */
.card-icon .fa-palette {
  color: #e74c3c !important; /* 使用红色系体现艺术感 */
  /* 或者使用紫色系：color: #9b59b6; */
}

  
  .username {
    margin-bottom: 1rem;
    color: #ecf0f1;
  }
  
  .user-info {
    text-align: left;
    font-size: 0.9rem;
  }
  
  .user-info span {
    color: #bdc3c7;
    display: block;
    margin-top: 0.5rem;
  }
  
  .main-content {
    flex: 1;
    padding: 2rem;
  }
  
  .doc-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
  }
  
  .doc-card {
    background: white;
    border-radius: 10px;
    padding: 2rem;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
  }
  
  .doc-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  }
  
  .card-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
  }
  
  .card-icon .fa-file-word {
    color: #2b579a;
  }
  
  .card-icon .fa-file-excel {
    color: #217346;
  }
  
  h3 {
    margin-bottom: 0.5rem;
    color: #2c3e50;
  }
  
  p {
    color: #7f8c8d;
    font-size: 0.9rem;
  }
  .action-buttons {
  margin-top: 2rem; /* 与用户信息保持距离 */
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* 现代按钮样式 */
.btn {
  position: relative;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn:active {
  transform: translateY(0);
}

/* 切换账号按钮 */
.switch-account {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 退出登录按钮 */
.logout {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 按钮图标动画 */
.btn i {
  transition: transform 0.3s ease;
}

.btn:hover i {
  transform: rotate(15deg);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .btn {
    padding: 10px 16px;
    font-size: 0.9rem;
  }
}

  </style>